<script setup>
import topNav from "../../components/topNav.vue";
import { introApi } from "@/services/index";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { nextTick, ref, watch, onMounted } from "vue";
import { appInfo, loginSwitch } from "@/services/user";
// import topNav from "../../components/topNav.vue";
import { operation } from "@/utils/num.js";
import { appScTransferSource, appShopSelector } from "@/services/transfer";
const topHeight = ref(uni.getStorageSync("topHight") || 0);
const selectType = ref(1);
const isTime = ref(false);
const isType = ref(false);
const keyword = ref("");
const form = ref({
  pageIndex: 1,
  pageSize: 20,
  sourceShopId: "",
  keyword: "",
  status: "",
});
const isSelectTime = ref(false);
const userObj = ref({});
const options1 = ref([]);
const options2 = ref([]);
const options4 = ref([
  { label: "已取消", value: "6" },
  { label: "待签收", value: "3" },
  { label: "已签收", value: "12" },
]);
const openDropdown = ref(false);
onReachBottom(() => {
  console.log("触底了");
  getAppProductQuery();
});

onLoad((options) => {
  getAppProductQuery();
  if (uni.getStorageSync("user")) {
    userObj.value = JSON.parse(uni.getStorageSync("user"));
  }
  options1.value = [userObj.value];
  getAppShopSelector();
});

// 门店选择
const getAppShopSelector = async () => {
  let res = await appShopSelector({});
  options2.value = res.data.datas;
};

const productData = ref([]);

const loading = ref("");
const getAppProductQuery = async (index) => {
  console.log("index", index);
  if (index == 1) {
    productData.value = [];
    loading.value = "";
  }
  if (index) {
    form.value.pageIndex = index;
  }
  if (loading.value == "noMore") {
    return;
  }

  loading.value = "Loading";
  if (isSelectTime.value) {
    form.value.createTimeStart = timevalue.value + " 00:00:00";
    form.value.createTimeEnd = timevalue2.value + " 23:59:59";
  } else {
    form.value.createTimeStart = "";
    form.value.createTimeEnd = "";
  }
  try {
    let res = await appScTransferSource(form.value);
    if (res.code == 200) {
      console.log(res);
      productData.value = productData.value.concat(res.data.datas);
      console.log(productData.value);
      form.value.pageIndex = form.value.pageIndex + 1;

      if (res.data.datas.length < form.value.pageSize) {
        loading.value = "noMore";
      } else {
        loading.value = "More";
      }
    } else {
    }

    console.log(res);
  } catch (e) {}
};
const select_one = ref("");
const select_two = ref("");
const select_three = ref("");
const select_from = ref("");

const uDropdownRef = ref(null);
function clerselect() {
  form.value.targetShopId = "";
  form.value.status = "";
  select_one.value = "";
  select_two.value = "";
  select_three.value = "";
  select_from.value = "";
}
const closeDropdown = () => {
  uDropdownRef.value.close();
};

const onSelectOne = (item) => {
  clerselect();
  uDropdownRef.value.close();
  select_one.value = item.shopId;
};
const onSelectTwo = (item) => {
  console.log("item", item);
  clerselect();
  uDropdownRef.value.close();
  select_two.value = item.id;
  form.value.sourceShopId = item.id;

  getAppProductQuery(1);
};

const onSelectForm = (item) => {
  clerselect();
  uDropdownRef.value.close();
  select_from.value = item.value;
  form.value.status = item.value;
  getAppProductQuery(1);
};

const onDetail = (item) => {
  console.log(item);
  uni.navigateTo({
    url: "/pages/transfer/record_det/index?id=" + item.id,
  });
};
const isshowpr = ref(false);
const openfun = () => {
  if (isshowpr.value) {
    return;
  }
  if (openDropdown.value == false) {
    openDropdown.value = true;
  }
};
const closefun = () => {
  if (isshowpr.value) {
    return;
  }
  isshowpr.value = true;
  openDropdown.value = false;
  isshowpr.value = false;
};
const searchFun = () => {
  getAppProductQuery(1);
};
const ChangeFun = () => {
  form.value.sourceShopId = "";
  form.value.status = "";
  clerselect();
};

//区间选择
const Time = (e) => {
  const date = new Date(e);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};
const showtime = ref(false);
const showtime2 = ref(false);
const timevalue = ref(Time(Date.now()));
const timevalue2 = ref(Time(Date.now()));
const minTime = ref(Date.now());

const formatter = (type, value) => {
  if (type === "year") {
    return `${value}年`;
  }
  if (type === "month") {
    return `${value}月`;
  }
  if (type === "day") {
    return `${value}日`;
  }
  return value;
};
const confirmDate = (e) => {
  let dateobj = new Date(e.value);

  if (showtime.value == true) {
    minTime.value = e.value;
    timevalue.value =
      dateobj.getFullYear() +
      "-" +
      (dateobj.getMonth() + 1 < 10
        ? "0" + (dateobj.getMonth() + 1)
        : dateobj.getMonth() + 1) +
      "-" +
      (dateobj.getDate() < 10 ? "0" + dateobj.getDate() : dateobj.getDate());

    showtime.value = false;
    // selectShow.value = false;
    showtime2.value = true;
    // getChartBusiness();
    selectLive.value = 0;
  }

  if (showtime2.value == true) {
    timevalue2.value =
      dateobj.getFullYear() +
      "-" +
      (dateobj.getMonth() + 1 < 10
        ? "0" + (dateobj.getMonth() + 1)
        : dateobj.getMonth() + 1) +
      "-" +
      (dateobj.getDate() < 10 ? "0" + dateobj.getDate() : dateobj.getDate());

    showtime2.value = false;

    // getChartBusiness();

    // selectShow.value = true;
    isSelectTime.value = true;
    uDropdownRef.value.close();
    getAppProductQuery(1);
  }

  // getChartProduct();
};
const qxTimeFun = () => {
  isSelectTime.value = false;
  timevalue.value = Time(Date.now());
  timevalue2.value = Time(Date.now());
  uDropdownRef.value.close();
  getAppProductQuery(1);
};
//无网状态
const connected = () => {
  getAppProductQuery();
  getAppShopSelector();
};
</script>

<template>
  <view class="bg">
    <topNav
      :title="'调货记录'"
      @save="saveFun"
      :border="true"
      rType="save"
    ></topNav>
    <view
      class="top"
      :class="!openDropdown ? 'top-open' : ''"
      :style="'top: calc( 88rpx + ' + topHeight + 'px);'"
    >
      <view class="search-k">
        <up-search
          placeholder="单据编号/操作人"
          @change="ChangeFun"
          @search="searchFun"
          v-model="form.keyword"
          :showAction="false"
        ></up-search>
      </view>
      <view class="select-list">
        <up-dropdown ref="uDropdownRef" @open="openfun()" @close="closefun()">
          <!-- :options="options1" -->
          <!-- <up-dropdown-item title="调入">
            <view class="slot-content" style="background-color: #ffffff">
              <scroll-view scroll-y="true" class="scroll-view">
                <view
                  class="index-item"
                  :class="item.shopId == select_one ? 'active' : ''"
                  v-for="(item, index) in options1"
                  :key="index"
                  @click="onSelectOne(item)"
                >
                  {{ item.shopName }}</view
                >
              </scroll-view>
            </view>
          </up-dropdown-item> -->
          <up-dropdown-item title="调出">
            <view class="slot-content" style="background-color: #ffffff">
              <scroll-view scroll-y="true" class="scroll-view">
                <view
                  @click="onSelectTwo(item)"
                  class="index-item"
                  v-for="(item, index) in options2"
                  :key="index"
                  :class="item.id == select_two ? 'active' : ''"
                >
                  {{ item.name }}</view
                >
              </scroll-view>
            </view></up-dropdown-item
          >
          <up-dropdown-item v-model="value2" title="时间">
            <view class="slot-content" style="background-color: #ffffff">
              <view class="kj-select">
                <view
                  class="kj-select-item kj-select-item2"
                  :class="showtime ? 'kj-select-item-seleect' : ''"
                  @click="showtime = true"
                >
                  {{ Time(timevalue) }}
                </view>
                <view>-</view>
                <view
                  class="kj-select-item kj-select-item2"
                  :class="showtime2 ? 'kj-select-item-seleect' : ''"
                  @click="showtime2 = true"
                  >{{ Time(timevalue2) }}
                </view>

                <view class="qx" @click="qxTimeFun">取消</view>
              </view>
            </view>
          </up-dropdown-item>
          <up-dropdown-item v-model="value2" title="状态">
            <view class="slot-content" style="background-color: #ffffff">
              <scroll-view scroll-y="true" class="scroll-view">
                <view
                  @click="onSelectForm(item)"
                  class="index-item"
                  v-for="(item, index) in options4"
                  :key="index"
                  :class="item.value == select_from ? 'active' : ''"
                >
                  {{ item.label }}</view
                >
              </scroll-view>
            </view>
          </up-dropdown-item>
        </up-dropdown>
      </view>
    </view>
    <!-- :style="'z-index:' + (openDropdown ? 0 : 10) + ';'" -->
    <view class="content">
      <view
        class="content-item"
        v-for="(item, index) in productData"
        :key="index"
        @click="onDetail(item)"
      >
        <view class="content-title"
          ><text>单据编号：{{ item.id }}</text
          ><text
            :class="
              item.status == 3
                ? 'orange'
                : item.status == 6
                ? 'info'
                : item.status == 12
                ? 'green'
                : ''
            "
            >{{ item.statusText }}</text
          ></view
        >
        <view class="content-info">
          <view class="content-info-left">
            <view class="content-info-left-item">
              <view class="one"></view>
              <view class="line"></view>
              <view class="two"></view>
            </view>
            <view class="content-info-sm">
              <view
                ><text>{{ item.sourceShop }} · {{ item.createBy }}</text>
              </view>
              <view class="two"
                ><text
                  >{{ item.targetShop }} ·
                  {{ item.approveBy ? item.approveBy : "-" }}</text
                ></view
              >
            </view>
          </view>
          <view class="content-info-right">
            <view class="content-info-right-item" v-if="item.totalAmount > 0"
              >¥{{ item.totalAmount }}</view
            >
            <view class="content-info-right-text">{{ item.totalNum }}件</view>
          </view>
        </view>
        <view class="content-time"
          ><text>调货时间：{{ item.createTime }}</text>
          <text v-if="item.totalReturnNum > 0" class="red"
            >退{{ item.totalReturnNum }}件,{{
              item.totalReturnAmount ? "¥" + item.totalReturnAmount : ""
            }}</text
          ></view
        >
      </view>

      <view
        class="noData"
        v-if="productData.length <= 0 && loading == 'noMore'"
      >
        <view class="noData-img">
          <image src="@/static/nodate/datas.png" mode="scaleToFill" />
          <view>暂无商品 </view>
        </view>
      </view>
      <view class="loading-form" v-if="loading && productData.length > 0"
        ><van-loading size="24rpx" v-if="loading == 'Loading'"
          ><text class="loading-text">加载中...</text>
        </van-loading>
        <text class="loading-text" v-if="loading == 'More'">加载更多</text>
        <text class="loading-text" v-if="loading == 'noMore'"
          >~没有数据了~</text
        >
      </view>
    </view>
  </view>

  <up-datetime-picker
    title="开始时间"
    class="top-center"
    ref="datetimePickerRef"
    :hasInput="false"
    @close="showtime = false"
    @confirm="confirmDate"
    @cancel="showtime = false"
    format="YYYY-MM-DD"
    :show="showtime"
    v-model="timevalue"
    :formatter="formatter"
    :closeOnClickOverlay="true"
    mode="date"
  >
  </up-datetime-picker>

  <up-datetime-picker
    class="top-center"
    title="结束时间"
    ref="datetimePickerRef"
    :hasInput="false"
    @close="showtime2 = false"
    @confirm="confirmDate"
    @cancel="showtime2 = false"
    format="YYYY-MM-DD"
    :show="showtime2"
    v-model="timevalue2"
    :formatter="formatter"
    :closeOnClickOverlay="true"
    :minDate="minTime"
    mode="date"
  >
  </up-datetime-picker>
  <noWork @connected="connected"> </noWork>
</template>

<style lang="scss" scoped>
@import "index.scss";
</style>
